<template>
    <view class="data-v-7ab9aa21">
        <view class="flex a-center content data-v-7ab9aa21" v-if="lineData">
            <view class="data-v-7ab9aa21">
                <slot name="content"></slot>
            </view>
        </view>
        <view class="flex a-center data-v-7ab9aa21" style="padding-right: 10rpx">
            <view class="progress-container data-v-7ab9aa21 vue-ref" data-ref="progressContainer" id="container" :style="'background:' + inBgColor + ';'">
                <view
                    class="progress-content flex j-end data-v-7ab9aa21 vue-ref"
                    data-ref="progressContent"
                    id="content"
                    :style="
                        'height:' +
                        strokeWidth +
                        'px' +
                        ';' +
                        'background:' +
                        bgColor +
                        ';' +
                        'width:' +
                        contentWidth +
                        ';' +
                        'transition:' +
                        'width ' +
                        duration / 1000 +
                        's ease' +
                        ';'
                    "
                    v-if="isAnimate"
                >
                    <view class="textInside flex a-center j-center data-v-7ab9aa21" v-if="textInside && !noData">
                        <view class="data-v-7ab9aa21">{{ percentage + '%' }}</view>
                    </view>
                </view>
                <view
                    class="progress-content flex j-end data-v-7ab9aa21"
                    :style="'width:' + percentage + '%' + ';' + 'height:' + strokeWidth + 'px' + ';' + 'background:' + bgColor + ';'"
                    v-if="!isAnimate"
                >
                    <view class="textInside flex a-center j-center data-v-7ab9aa21" v-if="textInside && !noData">
                        <view class="text data-v-7ab9aa21">{{ percentage + '%' }}</view>
                    </view>
                </view>
            </view>
            <view class="data-v-7ab9aa21">
                <view class="percentage data-v-7ab9aa21" v-if="!textInside && !lineData && !noData && !isAnimate">{{ percentage + '%' }}</view>
            </view>
        </view>
    </view>
</template>

<script>
import tabBar from '@/components/TabBar/tabBar';
(global.webpackJsonp = global.webpackJsonp || []).push([
    ['components/ai-progress/ai-progress'],
    {
        '2c9d': function (e, t, n) {},
        '43f5': function (e, t, n) {
            'use strict';

            n.r(t);
            var o = n('c8f6');
            var r = n('9074');
            for (var i in r) {
                if (['default'].indexOf(i) < 0) {
                    (function (e) {
                        n.d(t, e, function () {
                            return r[e];
                        });
                    })(i);
                }
            }
            n('c99d');
            var a = n('f0c5');
            var c = Object(a.a)(r.default, o.b, o.c, false, null, '7ab9aa21', null, false, o.a, void 0);
            t.default = c.exports;
        },
        5762: function (e, t, n) {
            'use strict';

            (function (e) {
                Object.defineProperty(t, '__esModule', {
                    value: true
                });
                t.default = void 0;
                var n = {
                    name: 'AiProgress',
                    components: {},
                    props: {
                        percentage: {
                            type: [Number, String],
                            required: true
                        },
                        textInside: {
                            type: Boolean,
                            default: false
                        },
                        strokeWidth: {
                            type: [Number, String],
                            default: 6
                        },
                        duration: {
                            type: [Number, String],
                            default: 2000
                        },
                        isAnimate: {
                            type: Boolean,
                            default: false
                        },
                        bgColor: {
                            type: String,
                            default: '#409eff'
                        },
                        noData: {
                            type: Boolean,
                            default: false
                        },
                        lineData: {
                            type: Boolean,
                            default: false
                        },
                        inBgColor: {
                            type: String,
                            default: '#ebeef5'
                        }
                    },
                    data: function () {
                        return {
                            width: 0,
                            timer: null,
                            containerWidth: 0,
                            contentWidth: 0
                        };
                    },
                    methods: {
                        start: function () {
                            var that = this;
                            if (this.isAnimate) {
                                var n = e.createSelectorQuery().in(this).selectAll('#container');
                                e.createSelectorQuery().in(this).selectAll('#content');
                                n.boundingClientRect().exec(function (e) {
                                    that.contentWidth = 1 * e[0][0].width * ((1 * that.percentage) / 100).toFixed(2) + 'px';
                                });
                            }
                        }
                    },
                    mounted: function () {
                        var that = this;
                        this.$nextTick(function () {
                            that.start();
                        });
                    },
                    created: function () {},
                    filters: {},
                    computed: {},
                    watch: {},
                    directives: {}
                };
                t.default = n;
            }.call(this, n('543d').default));
        },
        9074: function (e, t, n) {
            'use strict';

            n.r(t);
            var o = n('5762');
            var r = n.n(o);
            for (var i in o) {
                if (['default'].indexOf(i) < 0) {
                    (function (e) {
                        n.d(t, e, function () {
                            return o[e];
                        });
                    })(i);
                }
            }
            t.default = r.a;
        },
        c8f6: function (e, t, n) {
            'use strict';

            n.d(t, 'b', function () {
                return o;
            });
            n.d(t, 'c', function () {
                return r;
            });
            n.d(t, 'a', function () {});
            var o = function () {
                this.$createElement;
                this._self._c;
            };
            var r = [];
        },
        c99d: function (e, t, n) {
            'use strict';

            var o = n('2c9d');
            n.n(o).a;
        }
    }
]);
(global.webpackJsonp = global.webpackJsonp || []).push([
    'components/ai-progress/ai-progress-create-component',
    {
        'components/ai-progress/ai-progress-create-component': function (e, t, n) {
            n('543d').createComponent(n('43f5'));
        }
    },
    [['components/ai-progress/ai-progress-create-component']]
]);
</script>
<style>
@import './ai-progress.css';
</style>
